<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:64:"D:\phpStudy\WWW\mangmeshi/./application/admin\view\life\add.html";i:1524566512;}*/ ?>
<link rel="stylesheet" type="text/css" href="static/plugins/webupload/webuploader.css">
<style>
    .webuploader-container {
        position: relative;
        float: left;
    }
    .webuploader-element-invisible {
        position: absolute !important;
        clip: rect(1px 1px 1px 1px);
        /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
    }
    .webuploader-pick {
        display: inline-block;
        cursor: pointer;
        background: #fafafa;
        padding: 10px 15px;
        color: #666;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
        float: left;
        width: 128px;
        height: 88px;
        position: relative;
        border: 1px solid #d6dee3;
        overflow: hidden;
        padding-top: 20px;
    }
    .webuploader-pick-hover {
        background: #00A3C6;
        color: #fff;
    }
    .webuploader-pick-disable {
        opacity: 0.6;
        pointer-events: none;
    }
    /*demo样式*/
    #picker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
    #picker .webuploader-pick {
        padding: 6px 12px;
        display: block;
    }
    #uploader-demo .thumbnail {
        width: 150px;
        height: 150px;
        overflow: hidden;
    }
    #uploader-demo .thumbnail img {
        width: 100%;
    }
    .uploader-list {
        /*width: 100%;*/
        overflow: hidden;
        float: left;
    }
    .file-item {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        padding: 5px;
    }
    .file-item .error {
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        background: red;
        color: white;
        text-align: center;
        height: 20px;
        font-size: 14px;
        line-height: 23px;
    }
    .file-item .info {
        position: absolute;
        left: 4px;
        bottom: 4px;
        right: 4px;
        height: 20px;
        line-height: 20px;
        text-indent: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        z-index: 10;
    }
    /* 上次成功*/
    .upload-state-done:after {
        content: "\f00c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        position: absolute;
        bottom: 0;
        right: 4px;
        color: #4cae4c;
        z-index: 99;
    }
    /*进度条*/
    .file-item .progress {
        position: absolute;
        right: 4px;
        bottom: 4px;
        height: 3px;
        left: 4px;
        height: 4px;
        overflow: hidden;
        z-index: 15;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    /*进度条*/
    .file-item .progress span {
        display: block;
        overflow: hidden;
        width: 0;
        height: 100%;
        background: #d14 url(images/progress.png) repeat-x;
        -webit-transition: width 200ms linear;
        -moz-transition: width 200ms linear;
        -o-transition: width 200ms linear;
        -ms-transition: width 200ms linear;
        transition: width 200ms linear;
        -webkit-animation: progressmove 2s linear infinite;
        -moz-animation: progressmove 2s linear infinite;
        -o-animation: progressmove 2s linear infinite;
        -ms-animation: progressmove 2s linear infinite;
        animation: progressmove 2s linear infinite;
        -webkit-transform: translateZ(0);
    }
    /*取消 删除*/
    .file-item div.file-panel {
        position: absolute;
        height: 0;
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000')\0;    background: rgba( 0, 0, 0, 0.6);
        width: 100%;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: 300;
        color: #fff;
        line-height: 30px;
        text-align: right;
    }
    .file-item div.file-panel span {
        width: 24px;
        height: 24px;
        display: inline;
        float: right;
        text-indent: -9999px;
        overflow: hidden;
        background: url(images/icons.png) no-repeat;
        margin: 5px 1px 1px;
        cursor: pointer;
    }
    .file-item div.file-panel span.rotateLeft {
        background-position: 0 -24px;
    }
    .file-item div.file-panel span.rotateLeft:hover {
        background-position: 0 0;
    }
    .file-item div.file-panel span.rotateRight {
        background-position: -24px -24px;
    }
    .file-item div.file-panel span.rotateRight:hover {
        background-position: -24px 0;
    }
    .file-item div.file-panel span.cancel {
        background-position: -48px -24px;
    }
    .file-item div.file-panel span.cancel:hover {
        background-position: -48px 0;
    }
    @-webkit-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @-moz-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    a.travis {
        position: relative;
        top: -4px;
        right: 15px;
    }

</style>
<div>
    <form class="form-horizontal bv-form"  id="addForm" role="form" >
        <fieldset>
            <legend>基本信息</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label">标题</label>
                <div class="col-sm-6">
                    <input type="text" name="title" class="form-control"  value="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">类型</label>
                <div class="col-sm-6">
                    <select name="type" style="width:140px;font-size: 13px;" class="SearchForm form-control">
                        <?php if(is_array($type) || $type instanceof \think\Collection): if( count($type)==0 ) : echo "" ;else: foreach($type as $key=>$vo): ?>
                        <option value="<?php echo $vo['lt_id']; ?>"><?php echo $vo['lt_name']; ?></option>
                        <?php endforeach; endif; else: echo "" ;endif; ?>
                    </select>
                </div>
            </div>
            <!--缩略图只有一张的时候-->
            <!--<div class="form-group">-->
                <!--<label class="col-sm-3 control-label">缩略图</label>-->
                <!--<div class="col-sm-5">-->
                    <!--<a href="javascript:;" class="file">-->
                        <!--<input type="file" name="thumb"  onchange="aaaa(this);">-->
                    <!--</a>-->
                    <!--<span style="font-size:10px;color:red">* 图片不大于2M 格式JPG,PNG,JPEG</span>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<label class="col-sm-3 control-label">预览图</label>-->
                <!--<div class="col-sm-3" id="androimg" style="float:left">-->
                    <!--<img src="" alt="" style="width:180px;height:100px;">-->
                <!--</div>-->
            <!--</div>-->
            <!--end-->
            <!--多文件上传-->
            <!--<div class="form-group">-->
                <label class="col-sm-3 control-label">缩略图</label>
                <div id="uploader-demo" class="controls border">
                    <div class="uploader-list fileList border"> </div>
                    <div class="filePicker border" style="padding-top: 10px">点击添加
                        <br/>最多 3 张
                    </div>

                </div>
            <!--</div>-->
            <div id="testdiv" style="display: none">
            </div>
            <div style="clear: both"></div>
            <!--end-->

            <div class="form-group">
                <label class="col-sm-3 control-label">内容</label>
            </div>
            <div id="editor">

            </div>
            <textarea name="con" id="con" style="display: none;"></textarea>
        </fieldset>
    </form>
</div>
<script type="text/javascript" src="vendor/wangEditor/release/wangEditor.js"></script>
<script type="text/javascript" src="static/plugins/webupload/webuploader.min.js"></script>
<script type="text/javascript">
    //  图片webupload 上传

    $(function() {

        var $ = jQuery,
            $list = $('.fileList'),
            $filePicker = $('.filePicker'), // 上传按钮
            $upimgmax = 3, // 支持上传最大个数
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,
            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,
            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 自动上传。
                auto: true,
                // swf文件路径
                swf: 'static/plugins/webupload/Uploader.swf',
                // 文件接收服务端。
                server: 'admin/Information/mww',  //  这里是图片上传地址
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash
                pick: {
                    id: $filePicker,
//                     multiple: true
                },
                duplicate: true,
                fileSingleSizeLimit: 2048000, //  单个文件大小
                fileNumLimit: $upimgmax, // 限制上传个数
                accept: {
                    title: 'Images',
                    extensions: 'jpg,jpeg,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png' //修改这行
                },
                thumb: {
                    width: 110,
                    height: 110,
                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 70,
                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: true,
                    // 是否允许裁剪。
                    crop: true,
                    // 为空的话则保留原有图片格式。
                    // 否则强制转换成指定的类型。
                    type: 'image/jpeg'
                }
            });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function(file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    // '<div class="info">' + file.name + '</div>' +
                    '<div class = "file-panel" style = "height: 30px;" >  ' +
                    '<span class = "cancel delimgbtns" title="删除">删除</span></div>' +
                    '</div>'
                ),
                $img = $li.find('img');
            $list.append($li);
            removefiles(file); // 文件删除
            // 创建缩略图
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            var uploadfilesNum = uploader.getStats().queueNum; //  共选中几个图片
            // 最多支持 5张
            if ($('.file-item').length >= $upimgmax) {
                $filePicker.hide();
                if ($('.file-item').length >= ($upimgmax + 1)) {
                    // 中断 取消 大于  5张图片的对象
                    uploader.removeFile(file, true);
                    $('.file-item').last().remove();
                }
            } else {
                $filePicker.show();
            }
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');}
            $percent.css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function(file, response) {
            var $li = $('#' + file.id),
                $img = $li.find('img'),
                $fileUrl = response.url, // 图片上传地址
                $filename = file.name, // 上传文件名称
                $filesize = (file.size / 1024).toFixed(2); // 上传文件尺寸大小 保留2位
            $li.addClass('upload-state-done');
            $('#testdiv').append('<input type="checkbox" checked id="aaa'+$fileUrl.substr(-24,20)+'" name="thumb[]" value="'+$fileUrl+'">');
            $img.attr('src', $fileUrl);
            removefiles(file); // 删除文件
            removehttpfiles();
//            alert($fileUrl);
            // 传值赋值
            // 商品详细图片 位置
            // 这里自己赋值 传值
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function(file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
            console.log(file);
            // 获取文件统计信息。返回一个包含一下信息的对象。
            /*successNum 上传成功的文件数
             progressNum 上传中的文件数
             cancelNum 被删除的文件数
             invalidNum 无效的文件数
             uploadFailNum 上传失败的文件数
             queueNum 还在队列中的文件数
             interruptNum 被暂停的文件数
             */
            // console.log(uploader.getStats().uploadFailNum);
        });
        uploader.on('error', function(handler) {
            if (handler == "Q_TYPE_DENIED") {
                layer.msg("请上传JPG、PNG、JPEG格式文件");
            }
            if (handler == "Q_EXCEED_NUM_LIMIT") {
                layer.msg("最多只能上传 " + $upimgmax + "张图片");
            }
            if (handler == "F_EXCEED_SIZE") {
                layer.msg("单张图片不能超过2M");
            }
        });
        // 删除按钮事件
        function removefiles(file) {
            // 删除本条数据
            // $('.delimgbtns').each(function(index, el) {
            $('.delimgbtns').click(function() {
                // 中断 取消 传图
                uploader.removeFile(file, true);
                var spthisdiv = $(this).parent();
                spthisdiv.parent('.file-item').remove();
                $filePicker.show(); // 上传按钮显示
            });
            // });
        }
        // 删除服务器文件
        function removehttpfiles() {
            // 删除本条数据
            // $('.delimgbtns').each(function(index, el) {
            $('.delimgbtns').click(function() {
                // event.preventDefault();
                var spthisdiv = $(this).parent();
                // 如果上传成功才执行
                var thisimgsrc = spthisdiv.siblings('img').attr('src');
                var geturl = "admin/Information/mwwdel";
//                alert(thisimgsrc);
                $.ajax({
                    url: 'admin/Information/mwwdel', //form action
                    dataType: 'JSON', //返回体类型
                    type: 'POST', // form type
                    data: "src=" + thisimgsrc,//  请求参数
                    success: function (data) {
                        $('#aaa'+thisimgsrc.substr(-24,20)).remove();
                    },
                    error: function () {

                    }
                    });
            });
            // });
        }
    });









    var E = window.wangEditor;
    var editor = new E('#editor');
    editor.customConfig.uploadImgServer = 'admin/Information/mww';
    //editor.customConfig.uploadImgShowBase64 = true;
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadFileName = 'thumb';
    editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 <?php echo url("","",true,false);?> 这种格式，即可这样插入图片：
            var url = result.url;
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };
    editor.create();

    function aaaa(file) {
        var prevDiv = document.getElementById('androimg');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" height="150"/>';
            };
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
</script>